<template>
  <div class="app">
    <router-view />
    <MusicPlayer ref="musicPlayer" />
    <ConnectionStatus />

    <!-- 全局加载遮罩 -->
    <div v-if="isLoading" class="global-loading">
      <div class="loading-spinner"></div>
      <p>正在加载中...</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import MusicPlayer from './components/MusicPlayer.vue'
import ConnectionStatus from './components/ConnectionStatus.vue'
import { useEventBus } from './utils/eventBus'
import { useUserStore } from './stores/user'

const musicPlayer = ref(null)
const router = useRouter()
const eventBus = useEventBus()
const isLoading = ref(false)
const userStore = useUserStore()

onMounted(() => {
  // 初始化用户信息
  userStore.initUserInfo()
  // 监听播放音乐事件
  eventBus.on('playMusic', (music) => {
    if (musicPlayer.value) {
      musicPlayer.value.playMusic(music)
    }
  })

  // 监听播放列表事件
  eventBus.on('setPlaylist', (list, index) => {
    if (musicPlayer.value) {
      musicPlayer.value.setPlaylist(list, index)
    }
  })

  // 监听路由加载状态
  router.beforeEach((to, from, next) => {
    isLoading.value = true
    next()
  })

  router.afterEach(() => {
    // 使用更智能的加载检测
    const checkPageLoad = () => {
      if (document.readyState === 'complete') {
        setTimeout(() => {
          isLoading.value = false
        }, 200)
      } else {
        setTimeout(checkPageLoad, 100)
      }
    }
    checkPageLoad()
  })
})
</script>

<style lang="scss">
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 内容出现动画 */
.content-fade-in {
  animation: contentFadeIn 0.6s ease-out;
}

.content-stagger > * {
  animation: slideUp 0.5s ease-out forwards;
  opacity: 0;
  transform: translateY(20px);
}

.content-stagger > *:nth-child(1) {
  animation-delay: 0.1s;
}
.content-stagger > *:nth-child(2) {
  animation-delay: 0.2s;
}
.content-stagger > *:nth-child(3) {
  animation-delay: 0.3s;
}
.content-stagger > *:nth-child(4) {
  animation-delay: 0.4s;
}
.content-stagger > *:nth-child(5) {
  animation-delay: 0.5s;
}
.content-stagger > *:nth-child(6) {
  animation-delay: 0.6s;
}
.content-stagger > *:nth-child(7) {
  animation-delay: 0.7s;
}
.content-stagger > *:nth-child(8) {
  animation-delay: 0.8s;
}

@keyframes contentFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.scale-in {
  animation: scaleIn 0.4s ease-out forwards;
}

.fade-in-left {
  animation: fadeInLeft 0.5s ease-out forwards;
}

.fade-in-right {
  animation: fadeInRight 0.5s ease-out forwards;
}

/* 性能优化：减少低端设备的动画 */
@media (prefers-reduced-motion: reduce) {
  .content-stagger > *,
  .scale-in,
  .fade-in-left,
  .fade-in-right,
  .content-fade-in {
    animation: none !important;
    transition: none !important;
  }
}

/* 全局加载遮罩 */
.global-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(5px);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #1db954;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.global-loading p {
  color: #666;
  font-size: 14px;
  margin: 0;
}

/* 淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-out;
}
</style>
